<template>
  <div class="class-box">
    <div class="search-box">
      <el-button type="primary" @click="goCreateClass">新建班级</el-button>
      <div class="search-item">
        <el-select v-model="keySearchCourse" placeholder="所属课程">
          <el-option
            v-for="item in searchCourseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="KeyGradeStatus" placeholder="班级状态">
          <el-option
            v-for="item in gradeStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="keyClassName" placeholder="请输入班级名称" style="width:200px;" />
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <el-table :data="classTableData" border style="width: 100%;">
      <el-table-column prop="className" label="班级名称" align="center" width="300" />
      <el-table-column prop="belongCourse" label="所属课程" align="center" width="300" />
      <el-table-column label="开班/结班日期" align="center" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>/
          <span>{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="classStatus" label="班级状态" align="center" width="200" />
      <el-table-column label="报名人数/上限" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.applyPerson }}</span>/
          <span>{{ scope.row.maxPerson }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已上课/排课次数" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.classCount }}</span>/
          <span>{{ scope.row.courseCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="250">
        <template slot-scope="scope">
          <el-button type="text">排班课</el-button>
          <el-button type="text" @click="showClassStudent">班级学员</el-button>
          <el-button type="text" @click="goCreateClass($event,scope.row.id)">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 班级学员弹框 -->
    <el-dialog :visible.sync="classStudentDialog" title="班级学员" width="60%">
      <div class="class-title">
        <div class="title">{{ classInfo.className }}</div>
        <div class="tip">
          <span class="label">课程</span>
          <span class="content">{{ classInfo.belongCourse }}</span>
        </div>
        <div class="tip">
          <span class="label">人数/上限</span>
          <span class="content">{{ classInfo.applyPerson+'/'+classInfo.maxPerson }}</span>
        </div>
        <div class="tip">
          <span class="label">已上课/排课次数</span>
          <span class="content">{{ classInfo.classCount+'/'+classInfo.courseCount }}</span>
        </div>
      </div>
      <el-table
        :data="classInfo.list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        style="width: 100%;"
      >
        <el-table-column prop="studentName" label="学员" align="center" />
        <el-table-column prop="contact" label="手机号" align="center" />
        <el-table-column prop="signNum" label="签到次数" align="center" />
        <el-table-column prop="applyTime" label="报名时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin:20px 0;">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="classInfo.list.length"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="classStudentDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keySearchCourse: '',
      KeyGradeStatus: '',
      keyClassName: '',
      searchCourseOptions: [
        {
          value: '语文作文',
          label: '语文作文'
        }
      ],
      gradeStatusOptions: [
        {
          value: '待开班',
          label: '待开班'
        },
        {
          value: '开班中',
          label: '开班中'
        },
        {
          value: '已结班',
          label: '已结班'
        }
      ],
      classTableData: [
        {
          id: '1',
          className: '速成班',
          belongCourse: '语文作文',
          startTime: '2019-06-01',
          endTime: '2019-06-03',
          classStatus: '已结班',
          applyPerson: '12',
          maxPerson: '100',
          classCount: '1',
          courseCount: '9'
        }
      ],
      classStudentDialog: false,
      classInfo: {
        id: '1',
        className: '速成班',
        belongCourse: '语文作文',
        startTime: '2019-06-01',
        endTime: '2019-06-03',
        classStatus: '已结班',
        applyPerson: '12',
        maxPerson: '100',
        classCount: '1',
        courseCount: '9',
        list: [
          {
            studentName: '刘德华',
            contact: '13133131313',
            signNum: '3',
            applyTime: '2019-06-01'
          }
        ]
      },
      currentPage: 1,
      pageSize: 5
    }
  },
  methods: {
    showClassStudent(id) {
      this.classStudentDialog = true
      // 请求对应班级学员数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    goCreateClass(e, id) {
      // 新建课程不传递id，跳转页面课更换所属课程、
      // 编辑跳转传递id，跳转页面不可更换课程
      this.$router.push({ name: 'Createclass', query: { 'classId': id }})
    }
  }
}
</script>

<style lang="scss" scoped>
.class-box {
  padding: 20px;
  .search-box {
    margin-bottom: 20px;
    .search-item {
      float: right;
    }
  }
  .class-title {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #f5f7fa;
    .title {
      margin-bottom: 10px;
      color: #353535;
      font-weight: 700;
      font-size: 20px;
    }
    .tip {
      display: inline-block;
      margin-right: 30px;
      font-size: 14px;
      line-height: 22px;
      .label {
        margin-right: 20px;
        color: #888;
      }
      .content {
        color: #353535;
      }
    }
  }
}
</style>
